
	
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信子传父</title>
 </head>
 <body>
 <!-- <script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script> -->
 <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
 <div id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </div>
  <script>
    //通过事件的方式传递
    //  绑定 -- 触发
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg参数要拿子传递的值          
        recvMsg:function(msg){
          console.log(msg)
          console.log(1);
          console.log("父组件接收到子组件的数据"+msg);
          this.sonMsg = msg;
 
       },
      },
      template:`
        <div>
          <h1>这是父组件</h1>
          <p>子组件传来的数据为：{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent='recvMsg'></child-component>
        </div>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //来触发绑定给子组件的自定义方法
          //this.$emit("customEvent");第一个参数触发
          //this.$emit("customEvent","哈哈哈哈");第二个参数传值
          console.log('ken')
          this.$emit("customEvent","Ken");
          console.log(1)
        },
      },
      template:`
        <div>
          <h1>这是子组件</h1>
          <button @click="sendMsg">sendToFather</button>
        </div>
      `
    })
   var vm = new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
  <script>
	/**
	 * 二、组件间通信（子组件传值给父组件）
	 * 通过事件的方式来完成数据的传输。
	 * ①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值
		methods:{
		　　recvMsg:function(msg){
		　　//参数msg就是子组件通过事件出来的数据
		　　}
		}
	 * ②绑定事件处理函数
	 * 事件一般情况 都是自定义事件
	 * <child-component @myEvent="recvMsg"></child-component>
	 * ③在子组件触发事件事件名，值
	 * this.$emit('myEvent',myPhone)
	 * //触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数
	 * 总结：
	 * 在Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props
	 * 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
	 */
</script>
 </body>
</html>